<template>
  <div class="swiper">
    <div class="swipe-wrap">
      <div v-for="(item, index) in data" :key="index" class="swipe-item" @click="handleClick(item.path)">
        <book-item :CPNimgurl="item.icon">
          <span slot="name">{{ item.name }}</span>
        </book-item>
      </div>
    </div>
  </div>
</template>

<script>
import BookItem from '@/components/BookItem.vue'
export default {
  components: {
    BookItem
  },
  data() {
    return {

    }
  },
  props: {
    data: Array
  },
  methods: {
    handleClick(path) {
      this.$router.push({
        name: 'bookeDetailView',
        params: {
          path: path
        }
      })
    }
  }
}
</script>

<style>
.swipe-wrap {
  padding: 0 15px;
  white-space: nowrap;
  overflow-x: scroll;
}

.swipe-item {
  display: inline-block;
  width: 100px;
  margin-right: 10px;
}
</style>